<template>
  <div class="content_box">
    <div class="topBox add_btn_top">
      <div class="switch-text" :style="{ color: switchTextColor }">
        {{ switchText }}
      </div>
      <el-switch
        v-model="screen"
        v-permission="[4, 'switch']"
        class="screenSwitch"
        active-color="#2680D2"
        @change="openScrenn"
      />
      <div class="line" />
      <el-button
        v-permission="[1, 'button']"
        class="addButton"
        type="primary"
        size="mini"
        @click="openadd"
        ><i class="el-icon-plus" />添加
      </el-button>
    </div>
    <div v-permission="[4, 'list']">
      <div class="boxLayout">
        <div style="" class="con_left">
          <div v-init-screen-h v-loading="loading" class="box_left">
            <div v-if="deviceData && deviceData.length != 0" class="my_box_bg">
              <el-row :gutter="20">
                <el-col
                  v-for="(device, deviceListindex) in deviceData"
                  :key="deviceListindex"
                  :xs="24"
                  :sm="12"
                  :md="12"
                  :lg="lgNum"
                  :xl="6"
                  style="margin-bottom: 20px"
                >
                  <div
                    class="list_item listHoverStyle"
                    @click="toDevicesDetails(device.token)"
                  >
                    <div class="add_btn w100 flex-x flex-right">
                      <el-button
                        round
                        icon="el-icon-plus"
                        type="primary"
                        size="mini"
                        @click.stop="
                          openAddAssignments(device.token, device.name)
                        "
                        >添加分配</el-button
                      >
                    </div>
                    <div class="item_top">
                      <div class="img_msg">
                        <el-image
                          class="img"
                          :src="device.deviceType.imageUrl | filtersFileUrl()"
                        />
                        <div class="msg_box">
                          <div class="flex-x flex-space">
                            <div class="msg_title" style="width: 70%">
                              {{ device.name }}
                            </div>
                          </div>
                          <div class="summary" :title="device.deviceType.name">
                            设备类型: {{ device.deviceType.name }}
                          </div>
                          <div class="summary" :title="device.token">
                            Token: {{ device.token }}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="item_bottom">
                      <div class="list_box" @click.stop="toAsset()">
                        <div class="list_title">网关</div>
                        <img
                          v-if="
                            device.activeDeviceAssignments &&
                              device.activeDeviceAssignments[0].asset
                          "
                          class="img"
                          :src="
                            device.activeDeviceAssignments[0].asset.imageUrl
                              | filtersFileUrl()
                          "
                        />
                        <img
                          v-else
                          class="img"
                          src="../../../assets/images/comm/empty.png"
                        />
                      </div>
                      <div
                        class="list_box"
                        @click.stop="
                          toArea(
                            device.activeDeviceAssignments &&
                              device.activeDeviceAssignments[0].area
                              ? device.activeDeviceAssignments[0].area.token
                              : ''
                          )
                        "
                      >
                        <div class="list_title">站点</div>
                        <img
                          v-if="
                            device.activeDeviceAssignments &&
                              device.activeDeviceAssignments[0].area
                          "
                          class="img"
                          :src="
                            device.activeDeviceAssignments[0].area.imageUrl
                              | filtersFileUrl()
                          "
                        />
                        <img
                          v-else
                          class="img"
                          src="../../../assets/images/comm/empty.png"
                        />
                      </div>
                      <div class="list_box" @click.stop="toCustomer()">
                        <div class="list_title">用户</div>
                        <img
                          v-if="device.url"
                          class="img"
                          :src="device.url | filtersFileUrl()"
                        />
                        <img
                          v-else
                          class="img"
                          src="../../../assets/images/comm/empty.png"
                        />
                      </div>
                      <div
                        class="list_box"
                        @click.stop="
                          toBox(
                            device.activeDeviceAssignments &&
                              device.activeDeviceAssignments[0].voiceBox
                              ? device.activeDeviceAssignments[0].voiceBox.token
                              : ''
                          )
                        "
                      >
                        <div class="list_title">音箱</div>
                        <img
                          v-if="
                            device.activeDeviceAssignments &&
                              device.activeDeviceAssignments[0].voiceBox
                          "
                          class="img"
                          :src="
                            device.activeDeviceAssignments[0].voiceBox.imageUrl
                              | filtersFileUrl()
                          "
                        />
                        <img
                          v-else
                          class="img"
                          src="../../../assets/images/comm/empty.png"
                        />
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <empty-data v-if="deviceData && deviceData.length == 0" />
          </div>
          <Pagination
            :total="total"
            :page.sync="pageNum"
            :limit.sync="pageSize"
            :page-sizes.sync="pageSizes"
            @pagination="pagination"
          />
        </div>
        <div v-show="screenShow" class="searchForm">
          <div style="width: 100%">
            <div class="select">筛选</div>
            <div class="">
              <div class="searchText">设备类型</div>
              <el-select
                v-model="deviceType"
                class="inputStyle w100"
                multiple
                collapse-tags
                filterable
                placeholder="请选择"
                size="mini"
              >
                <el-option
                  v-for="item in deviceTypeData"
                  :key="item.token"
                  :label="item.name"
                  :value="item.token"
                />
              </el-select>
            </div>
            <div class="">
              <div class="searchText">名称</div>
              <el-input
                v-model="deviceName"
                class="inputStyle"
                clearable
                size="mini"
                placeholder="输入关键字搜索"
              />
            </div>

            <div class="">
              <div class="searchText">Token</div>
              <el-input
                v-model="deviceToken"
                class="inputStyle"
                clearable
                size="mini"
                placeholder="输入关键字搜索"
              />
            </div>

            <div class="">
              <div class="searchText">日期</div>
              <div class="inputStyle inputStyle_date">
                <el-date-picker
                  class="w100"
                  v-model="dateArr"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  align="right"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '00:00:00']"
                  size="mini"
                >
                </el-date-picker>
              </div>
            </div>
          </div>

          <div class="bottomBtn">
            <el-button
              class="reset"
              size="mini"
              style="width: 50%"
              @click="reSet"
              >重置</el-button
            >
            <el-button
              class="submit"
              size="mini"
              style="width: 50%"
              type="primary"
              @click="submitBut"
              >提交</el-button
            >
          </div>
        </div>
      </div>
    </div>

    <add-device :adddevice="adddevice" @changeShow="changeShow" />
    <addAssignments
      ref="addAssignmentsRef"
      :add-assignment="addAssignment"
      :add-assignment-device-token="addAssignmentDeviceToken"
      :add-assignment-device-name="addAssignmentDeviceName"
      @changeShow="changeShow"
    />
  </div>
</template>

<script>
import "../../../assets/style/deviceCss/filterWindow.css";
import "../../../assets/style/deviceCss/commonStyle.css";
import addDevice from "./addDevice";
import addAssignments from "./addAssignments";
import Pagination from "@/views/common/page.vue";
import emptyData from "@/views/common/emptyData";
import { getDeviceTypes } from "@/api/deviceType";
import { getDevicesV2 } from "@/api/device";
export default {
  components: {
    addDevice,
    addAssignments,
    Pagination,
    emptyData
  },
  data() {
    return {
      dateArr: [],
      loading: true,
      screen: false,
      screenShow: false,
      switchTextColor: "#666666",
      switchText: "显示筛选",
      formInline: {},
      pageNum: 1,
      pageSize: 20,
      lgNum: 6,
      pageSizes: [20, 50, 100, 300],
      total: 0,
      adddevice: false,
      addAssignment: false,
      addAssignmentDeviceToken: "",
      addAssignmentDeviceName: "",
      deviceData: [],
      deviceTypeData: [],
      deviceType: [],
      deviceName: "",
      deviceToken: "",
      startDate: "",
      endDate: ""
    };
  },
  mounted() {
    this.deviceData = null;
    this.getDeviceList();
    this.getDeviceTypeList();
  },
  methods: {
    // 显示筛选窗
    openScrenn() {
      this.lgNum = this.screen ? 8 : 6;
      this.screenShow = this.screen;
      // if (this.screen == true) {
      //   this.screenShow = true;
      // } else {
      //   this.screenShow = false;
      // }
    },
    // 重置
    reSet() {
      this.deviceType = [];
      this.deviceName = "";
      this.deviceToken = "";
      this.dateArr = [];
      this.getDeviceList();
    },
    // 提交
    submitBut() {
      this.getDeviceList();
    },
    // 添加设备弹窗
    openadd() {
      this.adddevice = true;
    },
    // 弹窗回调
    changeShow(isRefresh) {
      this.addAssignment = false;
      this.adddevice = false;
      if (isRefresh) {
        this.getDeviceList();
      }
    },
    // 添加分配弹窗
    openAddAssignments(token, name) {
      this.addAssignment = true;

      this.addAssignmentDeviceToken = token;
      this.addAssignmentDeviceName = name;
    },
    // 跳转详情
    toDevicesDetails(token) {
      this.$router.push({
        path: "devicesdetails",
        query: { deviceToken: token }
      });
    },
    // 获取设备类型列表
    getDeviceTypeList() {
      getDeviceTypes().then(res => {
        this.deviceTypeData = res.data.results;
      });
    },
    // 获取设备列表
    async getDeviceList() {
      var params = {
        includeVoiceBox: true,
        includeDeviceType: true,
        includeAssignment: true,
        excludeAssigned: false,
        page: this.pageNum,
        pageSize: this.pageSize,
        startDate: this.dateArr.length ? this.dateArr[0] : "",
        endDate: this.dateArr.length ? this.dateArr[1] : "",
        deviceName: this.deviceName,
        deviceToken: this.deviceToken,
        deviceTypeList: this.deviceType
      };
      this.loading = true;
      getDevicesV2(params)
        .then(res => {
          const r = res.data;
          this.total = r.numResults;
          this.deviceData = r.results.map(item => {
            return {
              ...item.idevice,
              ...item.user
            };
          });
          if (
            this.deviceType.length > 0 ||
            this.deviceName != "" ||
            this.deviceToken != "" ||
            this.dateArr.length
          ) {
            this.switchTextColor = "#2680D2";
            this.switchText = "显示筛选 ( 已筛选 )";
          } else {
            this.switchTextColor = "#666666";
            this.switchText = "显示筛选";
          }
          this.loading = false;
        })
        .finally(f => {});
    },
    // 分页回调
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.getDeviceList();
    },
    toBox(token) {
      if (token) {
        this.$router.push({
          name: "loudspeakerBoxDetails",
          query: {
            token
          }
        });
      }
    },
    // 跳转到站点详情
    toArea(token) {
      if (token) {
        this.$router.push({
          path: "/sitename",
          query: { areaToken: token }
        });
      }
    },
    toAsset() {
      this.$router.push({
        path: "/network"
      });
    },
    toCustomer() {
      this.$router.push({
        path: "/systemAdmin/userAdmin"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.my_box_bg {
  width: 100%;
  background-color: #fff;
}
.content_box {
  margin-bottom: 10px;
  .con_left {
    background-color: #fff;
    padding: 20px;
    padding-bottom: 0;
    width: 100%;
  }
  .box_left {
    width: 100%;
    background-color: #fff;
    /* padding: 20px; */
    /* height: 80vh; */
    /* height: calc(100vh - 150px) !important ; */
    /* height: calc(100vh - 150px - 46px) !important ; */
    overflow-y: auto;
    .item_bottom {
      display: flex;
      justify-content: space-between;
      /* flex-wrap: wrap; */

      .list_box {
        display: flex;
        align-items: center;
        .list_title {
          color: #999;
          font-size: 12px;
          margin-right: 8px;
        }
        .img {
          width: 32px;
          height: 32px;
          // margin-left: 8px;
          border-radius: 2px;
        }
      }
    }
    .list_item {
      padding: 12px;
      border: 1px solid #e4e4e4;
      overflow: hidden;
      background: rgb(228, 243, 254);
      border-radius: 6px;

      .item_top {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #e4e4e4;
        padding-bottom: 19px;
        margin-bottom: 19px;
        // .add_btn {
        //   cursor: pointer;
        //   /* align-items: center; */
        //   font-size: 12px;
        //   font-weight: 600;
        //   display: flex;
        //   /* height: 20px; */
        //   /* white-space: nowrap; */
        //   span {
        //     font-size: 12px;
        //     margin-left: 4px;
        //     color: #2680d2;
        //     white-space: nowrap;
        //   }
        // }
        .img_msg {
          display: flex;
          width: 100%;
          // display: flex;
          /* display: -webkit-box; */
        }
        .img {
          width: 80px;
          height: 80px;
          min-width: 80px;
          min-height: 80px;
          margin-right: 16px;
        }
        .msg_box {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
          width: 100%;
          .msg_title {
            color: rgb(17, 156, 254);
            font-size: 16px;
            word-break: break-all;
            @include textoverflow(1);
          }
          .summary {
            font-size: 12px;
            color: #707070;
            @include textoverflow(1);
            max-width: 230px;
          }
        }
      }
    }
  }
}
</style>
